<template>
    <div class="dataDownloadDetail">
        <div class="getBack_SAVE">
            <div class="l_getBack">
               <div class="l_back_box">
                    <el-button type="text" @click="goBackPage"><i class="el-icon-back"></i>返回</el-button>
                </div> 
                <el-divider direction="vertical"></el-divider>
                <div class="l_back_tit">资料下载</div>
            </div>
            <div>
                <el-button type="primary" size="mini" @click="closeDown">关闭</el-button>
            </div>
        </div>
        <div class="all_list">
            <div class="sub_matter_infor bgc_small">
                <div class="title_firm">标的物信息</div>
                <el-table
                    :data="lotsInfoTable"
                    :border="true"
                    height="180"
                    :header-cell-style="{background:'#f5f7fa'}">
                    <el-table-column type="index" label="#" align="center">
                    </el-table-column>
                    <el-table-column label="资源类型" prop="classname" align="center" width="90">
                    </el-table-column>
                    <el-table-column label="标的名称" prop="name" :show-overflow-tooltip="true" width="180">
                    </el-table-column>
                    <el-table-column label="单位" prop="unit" align="center" width="60">
                    </el-table-column>
                    <el-table-column label="预估数量" prop="amount" align="center" width="80">
                    </el-table-column>
                    <el-table-column label="保留单价(元)" prop="min_price" align="center"  width="110">
                    </el-table-column>
                    <el-table-column label="起拍单价(元)" prop="start_price" align="center"  width="110">
                    </el-table-column>
                    <el-table-column label="是否含税" prop="taxnum" align="center" width="90">
                    </el-table-column>
                    <el-table-column label="标的图片" align="center">
                        <template  slot-scope="scope">
                            <div v-for="(item,i) in scope.row.images" :key="i" class="down_look">
                                <span>{{item.file_name}}</span>
                                <a :href="httpImage+item.file_path" target="_blank" download>
                                    <i class="el-icon-download left_blue"></i>
                                </a>
                                <i class="el-icon-view left_blue" @click="openPic(item.file_path)"></i>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="保证金" prop="bond"  align="center" width="90"></el-table-column>
                    <el-table-column label="报名限制" prop="applicantstype" align="center" width="90">
                        <template slot-scope="scope">
                        <span v-if="scope.row.applicantstype=='0'">不限</span>
                        <span v-else-if="scope.row.applicantstype=='1'">仅限个人报名</span>
                        <span v-else-if="scope.row.applicantstype=='2'">仅限机构报名</span>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="bidder_infor bgc_small top_distance">
                <div class="title_bid">
                    <div class="title_firm">竞买人</div>
                    <div>
                        <a class="btn_a" :href="imgurls+`/entrust/DataDownload/exportDataToExcel?type=1&lots_id=${lotId}`" target="_blank" rel="noopener noreferrer">导出</a>
                    </div>
                </div>
                <el-table
                    :data="bidderTable"
                    :border="true"
                    height="180"
                    :header-cell-style="{background:'#f5f7fa'}">
                    <el-table-column label="竞买人" prop="name" align="center">
                    </el-table-column>
                    <el-table-column label="是否成交" prop="is_deal" align="center">
                    </el-table-column>
                    <el-table-column label="参与竞价次数" prop="bid_count" align="center">
                    </el-table-column>
                    <el-table-column label="最后出价时间" prop="last_bid_time" align="center">
                    </el-table-column>
                </el-table>
            </div>
            <div class="bidding_record bgc_small top_distance">
                <div class="title_bid">
                    <div class="title_firm">竞价记录</div>
                    <div>
                        <a class="btn_a" :href="imgurls+`/entrust/DataDownload/exportDataToExcel?type=2&lots_id=${lotId}`" target="_blank" rel="noopener noreferrer">导出</a>
                    </div>
                </div>
                <el-table
                    :data="bid_recordTable"
                    :border="true"
                    height="180"
                    :header-cell-style="{background:'#f5f7fa'}">
                    <el-table-column label="竞拍号" prop="bidnum" align="center">
                    </el-table-column>
                    <el-table-column label="出价" prop="price" align="center">
                    </el-table-column>
                    <el-table-column label="出价时间" prop="create_time" align="center">
                    </el-table-column>
                </el-table>
            </div>
            <div class="settlement_record bgc_small top_distance">
                <div class="title_bid">
                    <div class="title_firm">结算记录</div>
                    <div>
                        <a class="btn_a" :href="imgurls+`/entrust/DataDownload/exportDataToExcel?type=3&lots_id=${lotId}`" target="_blank" rel="noopener noreferrer">导出</a>
                    </div>
                </div>
                <el-table
                    :data="settleTable"
                    height="180"
                    :header-cell-style="{background:'#f5f7fa'}">
                    <el-table-column label="时间" prop="settlement_time" align="center"  width="250">
                    </el-table-column>
                    <el-table-column label="实际结算数量" prop="practical_number" align="center"  width="250">
                    </el-table-column>
                    <el-table-column label="实际结算金额" prop="practical_price" align="center"  width="250">
                    </el-table-column>
                    <el-table-column label="交割记录" prop="practical_price" align="center"  width="200">
                        <template slot-scope="scope">
                            <el-button type="text" @click="record(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="结算单" prop="name" align="center">
                        <template  slot-scope="scope">
                            <div v-for="(item,i) in scope.row.final_statement" :key="i" class="down_look">
                                <span>{{item.file_name}}</span>
                                <a :href="httpImage+item.file_path" target="_blank" download>
                                    <i class="el-icon-download left_blue"></i>
                                </a>
                                <i class="el-icon-view left_blue" @click="openPic(item.file_path)"></i>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <el-dialog title="交割记录" :visible.sync="jgSmallShow" width="1050px" :before-close="cancelBtn">
           
           <el-table
            :data="listRecord"
            style="width: 100%">
                <el-table-column type="index" label="序号" align="center"></el-table-column>
                <el-table-column prop="date_of_trade" label="时间" width="200"></el-table-column>
                <el-table-column prop="wagon_number" label="装运车号" width="120"></el-table-column>
                <el-table-column prop="delivery_num" label="交割数量" width="120"></el-table-column>
                <el-table-column prop="record" label="交割图片">
                    <template  slot-scope="scope">
                            <div v-for="(item,i) in scope.row.record" :key="i" class="down_look">
                                <span class="name_f">{{item.file_name}}</span>
                                <a :href="httpImage+item.file_path" target="_blank" download>
                                    <i class="el-icon-download"></i>
                                </a>
                                <svg-icon icon-class="eye-open" @click="openPic(item.file_path)"/>
                            </div>
                        </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <el-image-viewer style="z-index: 3000;" v-if="showViewer" :on-close="closeViewer" :url-list="urlIndex" />
        <div id="qrcode"></div>
      </div>
</template>

<script>
import {lotsDataDownload,bidderListDownload,
    bidRecordDownload,finalStatement,deliveryListLedger} from '@/api/release'
    import {intervalTime,downloadByBlob} from '@/utils/index'
 export default {
    name: 'DownStatistic',
    data(){
      return{
        showViewer: false,
        urlIndex:[],
        lotsInfoTable:[],
        bidderTable:[],
        bid_recordTable:[],
        settleTable:[],
        lotId:'',
        httpImage:'https://www.ympai.net',
        jgSmallShow:false,
        idjg:'',
        listRecord:[],
      }
    },
    components:{
        'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
    },
    created(){
        let query = this.$route.query;
        this.lotId = query.lotId;
        this.getlist();
    },
    methods:{
        getlist(){
            let query = this.$route.query;
            let id = query.lotId;
            lotsDataDownload({lots_id:id}).then(res =>{
                this.lotsInfoTable = [res.data];
            });
            bidderListDownload({lots_id:id}).then(res=>{
                res.data.forEach(item =>{
                    item.last_bid_time = intervalTime(item.last_bid_time);
                })
                this.bidderTable = res.data;
            });
            bidRecordDownload({lots_id:id}).then(res =>{
                this.bid_recordTable = res.data;
            });
            finalStatement({lots_id:id}).then(res=>{
                res.data.forEach(item =>{
                    item.settlement_time = intervalTime(item.settlement_time);
                })
                this.settleTable = res.data;
            });
        },
        // 关闭资料下载详情
        closeDown(){
            //返回资料下载
            this.$router.push('/information/dataDownload')
        },
        //点击返回 资料下载列表
        goBackPage(){
            this.$router.push('/information/dataDownload')
        },
        //结算单查看
        record(row){
            this.idjg = row.lots_id;
            this.jgSmallShow = true;
            this.getPageList();
        },
        downloadPic(urlVal){
            const url = this.imgurls+urlVal;
            window.open(url);
        },
        // 预览图片
        openPic(url){
            this.urlIndex = [url];
            this.showViewer = true;
        },
        //点击关闭大图预览
        closeViewer(){
          this.showViewer = false;
        },
        getPageList(){
            deliveryListLedger({id:this.idjg}).then(res => {
                var arr =res.data;
                arr.forEach(item =>{
                    item.date_of_trade=intervalTime(item.date_of_trade);
                })
                this.listRecord = res.data;
            });
        },
        cancelBtn(){
            this.jgSmallShow = false;
        }
    }
 }
</script>

<style lang="scss" scoped>
    .dataDownloadDetail{
        background-color: #f5f6f7;
        min-height: calc(100vh - 90px);
         // 公共样式
        .title_firm{
            font-size: 14px;
            font-weight: 700;
            height: 40px;
            line-height: 40px;
        }
        .bgc_small{
            background-color: #fff;
            padding: 0 10px 10px 10px;
        }
        .title_bid{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .top_distance{
            margin-top: 10px;
        }
        .left_blue{
            color: #409EFF;
            padding-left: 30px;
        }
        .btn_a{
            padding: 7px 15px;
            color: #fff;
            background-color: #409EFF;
            font-size: 12px;
            border-radius: 3px;
        }

        .down_look{
            color: #409EFF;
            cursor: pointer;
            .name_f{
                display: inline-block;
                width: 150px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                vertical-align: middle;
            }
            .el-icon-download{
                margin:0 30px;
            }
        }

      .getBack_SAVE{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 10px;
        background-color: #fff;
        // border-top: 1px solid #ccc;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
        .l_getBack{
            display: flex;
            align-items: center;
            .l_back_tit{
                font-size: 15px;
                font-weight: bold;
            }
        }
      }
      .all_list{
        padding: 10px;
        ::v-deep .el-table .el-table__cell {
            padding: 6px 0;
        }
      }
    }
</style>